<template>
	<rui-pages :bar="menu.system">
		<rui-card>
			<view class="system_box">
				<view class="system_box_label">
					语言设置
				</view>
				<view class="system_box_content">
					<view class="system_box_content_tab">
						<view class="system_box_content_tab_item" :class="locale == item.locale ?'current':''"
							v-for="(item, index) in language" :key="index" @click="changeTab(item.locale)">
							{{item.name}}
						</view>

					</view>
				</view>
			</view>

			<view class="system_switch">
				<switch :checked="setting.config?.sound" @change="onSitchSound" />
				<view class="system_switch_name">
					触摸声音
				</view>
			</view>
			<view class="system_switch">
				<switch :checked="setting.config?.print" @change="onSitchPrint" />
				<view class="system_switch_name">
					自动打印
				</view>
			</view>

			<view class="system_box mt">
				<view class="system_box_label">
					亮度
				</view>
				<view class="system_box_content">
					<rui-icons type="bright" size="30"></rui-icons>
					<view class="system_box_content_slider">
						<slider :value="setting.config?.brightnes*100" @change="onScreenBrightness"
							backgroundColor="#fff" />
					</view>
					<rui-icons type="dark" size="30"></rui-icons>
				</view>
			</view>

			<view class="system_nav">
				<view class="system_nav_item">
					<rui-icons type="message" size="25"></rui-icons>
					<view class="system_nav_item_name">
						系统信息
					</view>
					<view class="system_nav_item_icon">
						<rui-icons type="right" color="#999"></rui-icons>
					</view>
				</view>
				<view class="system_nav_item">
					<rui-icons type="consumables" size="25"></rui-icons>
					<view class="system_nav_item_name">
						耗材使用
					</view>
					<view class="system_nav_item_icon">
						<rui-icons type="right" color="#999"></rui-icons>
					</view>
				</view>
			</view>
		</rui-card>
	</rui-pages>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		settingStore
	} from '@/store';

	import menu from "@/utils/menu.js"
	


	let setting = settingStore();

	let locale = ref(uni.getLocale());
	let language = [{
			name: "中文",
			locale: "zh-Hans"
		},
		{
			name: "English",
			locale: "en"
		},
		{
			name: "日本語",
			locale: "ja"
		},
		{
			name: "한국어",
			locale: "ko"
		},
	]

	//设置语言
	const changeTab = (e) => {
		locale.value = e
		// uni.setLocale(e)
	}

	const onScreenBrightness = (e) => {
		let value = e.detail.value / 100;
		setting.setConfig('brightnes', value)
		uni.setScreenBrightness({
			value,
			success: function() {
				console.log('success');
			}
		});
	}

	const onSitchSound = (e) => {
		setting.setConfig('sound', e.detail.value)
	}
	const onSitchPrint = (e) => {
		setting.setConfig('print', e.detail.value)
	}
</script>

<style lang="scss">
	.mt {
		margin-top: 15px;
	}

	.system {
		&_nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20px;

			&_item {
				position: relative;
				display: flex;
				align-items: center;
				width: calc(50% - 40px);
				background: var(--bg);
				padding: 20px 15px;
				border-radius: 10px;

				&:active {
					background: #ddd;
				}

				&_icon {
					position: absolute;
					top: 50%;
					right: 15px;
					transform: translate(0, -50%);
				}

				&_name {
					font-size: 16px;
					margin-left: 10px;
				}
			}

		}

		&_switch {
			display: flex;
			align-items: center;
			margin: 25px 0;

			&_name {
				font-size: 18px;
				font-weight: bold;
				margin-left: 10px;
			}
		}

		&_box {
			background: var(--bg);
			padding: 15px;
			border-radius: 5px;

			&_content {
				margin-top: 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.current {
					color: #fff;
					background: var(--color);
				}

				&_tab {
					background: #cfd4e1;
					border-radius: 50px;
					display: flex;
					justify-content: space-between;
					width: 100%;

					&_item {
						width: 100%;
						text-align: center;
						padding: 10px;
						border-radius: 50px;
					}
				}

				&_slider {
					width: calc(100% - 50px);
				}
			}

			&_label {
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
</style>